<template>
  <div>

  </div>
</template>

<script>

import CtMapUtils from '../../api/ctMap'
import * as maptalks from "maptalks";

export default {
  name: 'ctMapDrawTool',
  components: {CtMapUtils},
  props: {
    drawSymbol: {
      type: Object,
      default() {
        const symbol = {
          'lineColor': '#000',
          'lineWidth': 2
        }
        return symbol;
      },
    },
  },
  data: () => ({}),
  mounted() {
    this.$nextTick(() => {
      const {map} = this.$parent;
      const {firstLayer} = this.$parent;
      this.drawInit(map, firstLayer)
    });
  },
  methods: {
    drawInit(map, firstLayer) {
      let drawUtil = CtMapUtils.drawUtil;
      const drawTool = drawUtil.ctCreateDrawTool('Point', this.drawSymbol);
      drawUtil.ctAddTo(drawTool, map)
      drawUtil.ctAddListen(drawTool, 'drawend', function (data) {
        drawUtil.ctAddGeometry(firstLayer, data.geometry)
      })
      let child = this.createChild(drawUtil, drawTool);
      let items = this.createParent(child, drawTool, firstLayer);
      let toolbar = CtMapUtils.controllerUtil.ctCreateToolbar(items);
      // 样式
      CtMapUtils.controllerUtil.ctAddToMap(toolbar, map)
      let dom = toolbar.getDOM();
      maptalks.DomUtil.setStyle(dom, 'background: red;width: 600px')

    },
    // 创建点击 事件， 开始画图
    createChild(drawUtil, drawTool) {
      return ['多边形', '折线', '圆', '矩形'].map((mode) => ({
        item: mode,
        click() {
          switch (mode) {
            case '多边形':
              drawUtil.ctSetMode(drawTool, 'Polygon')
              break
            case '折线':
              drawUtil.ctSetMode(drawTool, 'LineString')
              break
            case '圆':
              drawUtil.ctSetMode(drawTool, 'Circle')
              break
            case '矩形':
              drawUtil.ctSetMode(drawTool, 'Rectangle')
              break
            default:
              break
          }
          drawUtil.ctStart(drawTool)
        },
      }))
    },
    createParent(childs, drawTool, firstLayer) {
      return {
        items: [
          {
            item: '形状',
            children: childs,
          },
          {
            item: '停止',
            click() {
              drawTool.disable();
            },
          },
          {
            item: '清除',
            click() {
              firstLayer.clear();
            },
          },
        ],
      }
    }
  },
};
</script>
<style scoped>

</style>

